<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>博客</title>
		<script src="/js/axios.js"></script>
		<script src="/js/vue.js"></script>
		<script src="/js/element-ui/index.js"></script>
		<link rel="stylesheet" type="text/css" href="/js/element-ui/index.css" />
	</head>
	<body>
		<div id="box">
			<el-container>
				<el-header>
					<div th:include="~{common/nav-head::head}"></div>
				</el-header>
				<el-container>
					<el-main style="text-align: center;">
						<div th:if="${session.SPRING_SECURITY_CONTEXT}!=null">
							<el-button v-if="blog.likeId==null"  @click="like()">点赞</el-button>
							<el-button v-else @click="unLike()">取消点赞</el-button>
							<el-button v-if="blog.favouriteId==null" @click="favourite()">收藏</el-button>
							<el-button v-if="blog.favouriteId!=null" @click="unFavourite()">取消收藏</el-button>
						</div>
						<div>
							<span class="ii">标题:{{blog.title}}</span>
							<span style="margin-left: 3px;" class="ii">作者:{{blog.nickname}}</span>
							<span style="margin-left: 3px;" class="ii">发表时间:{{blog.createTime}}</span>
						</div>
						<div v-html="content"></div>
					</el-main>
				</el-container>
			</el-container>
		</div>
	</body>
	<script>
		new Vue({
			el: "#box",
			data: {
				blog:{
					id:null,
					userId:null,
					title:null,
					createTime:null,
					nickname:null,
					likeId:null,
					favouriteId:null
				},
				content:null
			},
			methods: {
				like(){
					let _this = this
					axios.post("/api/cons/blog/like/"+this.blog.id)
					.then(function(response){
						_this.blog.likeId = response.data.data.likeId
					})
				},
				unLike(){
					let _this = this
					axios.post("/api/cons/blog/delLike",{id:this.blog.likeId,blogId:this.blog.id})
					.then(function(response){
						_this.blog.likeId = response.data.data.likeId
					})
				},
				favourite(){
					let _this = this
					axios.post("/api/cons/blog/favourite/"+this.blog.id)
					.then(function(response){
						_this.blog.favouriteId = response.data.data.favouriteId
					})
				},
				unFavourite(){
					let _this = this
					axios.post("/api/cons/blog/delFavourite",{id:this.blog.favouriteId,blogId:this.blog.id})
					.then(function(response){
						_this.blog.favouriteId = response.data.data.favouriteId
					})
				},
				cancel(){
					window.location.href = "/"
				}
			},
			mounted() {
				let _this = this
				let blogId = sessionStorage.getItem("blogId")
				let contentId = sessionStorage.getItem("contentId")
				axios.get("/api/public/blog/findById/"+blogId)
				.then(function(response){
					_this.blog.id = response.data.data.id
					_this.blog.userId = response.data.data.userId
					_this.blog.likeId = response.data.data.likeId
					_this.blog.favouriteId = response.data.data.favouriteId
					_this.blog.title = response.data.data.title
					_this.blog.createTime = response.data.data.createTime
					_this.blog.nickname = response.data.data.nickname
				})
				axios.get("/api/public/content/findById/"+blogId+"/"+contentId)
				.then(function(response){
					_this.content = response.data.data.content
				})
			}
		})
	</script>
	<style>
		.ii{
			font-size: 13px;
			color: lightslategray;
		}
	</style>
</html>
